<script>
import router from "@/router";
import { ref } from "@vue/reactivity";
import store from "@/store";

export default {
  setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    //点击取消
    let returns = () => {
      // 获取时间
      const timeData = new Date()
      let yy = timeData.getFullYear()
      let mm = timeData.getMonth() + 1
      let dd = timeData.getDate()
      let hh = timeData.getHours();
      let mf = timeData.getMinutes() < 10 ? "0" + timeData.getMinutes() : timeData.getMinutes();
      let ss = timeData.getSeconds() < 10 ? "0" + timeData.getSeconds() : timeData.getSeconds();
      mm = mm < 10 ? '0' + mm : mm
      dd = dd < 10 ? '0' + dd : dd
      // console.log(yy+"-"+mm+"-"+dd,hh+":"+mf+":"+ss);
      let time=`${yy}-${mm}-${dd} ${hh}:${mf}:${ss}`
    //   console.log(time);
      //加入待支付type=1
      // 执行数据在readycar中加一个type=1
      store.commit("deltype",time);
      //取出allorder
      let allorder = JSON.parse(window.localStorage.getItem("allorder"));
      //判断是否有allorder，没有的话就直接存,有的话先取出再存
      //   console.log(allorder);
      if (allorder == null) {
        let aa = []; //空数组
        aa.push(store.state.oneorder); //aa中放入订单信息
        window.localStorage.setItem("allorder", JSON.stringify(aa)); //放入本地
      } else {
        let bb = JSON.parse(window.localStorage.getItem("allorder")); //取出数据
        bb.push(store.state.oneorder); //放入一个订单
        window.localStorage.setItem("allorder", JSON.stringify(bb)); //放入本地
      }
      
      
      router.push({
        path:"/myorder"
      })
    };
    // 点击确认
    let buynow = () => {
        // 获取时间
      const timeData = new Date()
      let yy = timeData.getFullYear()
      let mm = timeData.getMonth() + 1
      let dd = timeData.getDate()
      let hh = timeData.getHours();
      let mf = timeData.getMinutes() < 10 ? "0" + timeData.getMinutes() : timeData.getMinutes();
      let ss = timeData.getSeconds() < 10 ? "0" + timeData.getSeconds() : timeData.getSeconds();
      mm = mm < 10 ? '0' + mm : mm
      dd = dd < 10 ? '0' + dd : dd
      // console.log(yy+"-"+mm+"-"+dd,hh+":"+mf+":"+ss);
      let time=`${yy}-${mm}-${dd} ${hh}:${mf}:${ss}`
        
      //加入待发货type=2
      store.commit("buynow",time);
      //取出allorder
      let allorder = JSON.parse(window.localStorage.getItem("allorder"));
      //判断是否有allorder，没有的话就直接存,有的话先取出再存
      //   console.log(allorder);
      if (allorder == null) {
        let aa = []; //空数组
        aa.push(store.state.oneorder); //aa中放入订单信息
        window.localStorage.setItem("allorder", JSON.stringify(aa)); //放入本地
      } else {
        let bb = JSON.parse(window.localStorage.getItem("allorder")); //取出数据
        bb.push(store.state.oneorder); //放入一个订单
        window.localStorage.setItem("allorder", JSON.stringify(bb)); //放入本地
      }
      router.push({
        path:"/myorder"
      })
    };
    //获取title
    let title = ref("");
    title.value = store.state.readyCar[0].bannerData.title;
    // console.log(title.value);
    //获取总价格
    let money = JSON.parse(window.localStorage.getItem("allmoney"));

    // 返回上个界面
    let goBack = () => {
      router.go(-1);
    };

    return {
      goBack,
      money,
      title,
      showPopup,
      show,
      returns,
      buynow,
    };
  },
};
</script>


<template>
  <div class="container">
    <!-- 顶部 -->
    <div class="top">
      <div class="back3" @click="goBack">
        <i></i>
      </div>

      <div class="title">支付订单</div>

      <div class="change"></div>
    </div>

    <!-- 支付金额 -->
    <div class="money">
      <h6>
        ￥<span>{{ money*100/100}}</span>
      </h6>
      <h5>{{ title }}</h5>
    </div>

    <!-- 选择支付方式 -->
    <div class="title">
      <h6>选择支付方式</h6>

      <div class="choose">
        <div class="first">
          <h6>支付宝支付</h6>
          <input type="radio" name="money" checked />
        </div>

        <div class="second">
          <h6>微信支付</h6>
          <input type="radio" name="money" />
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <footer>
      <!-- <div class="box" @click="buynow">确认支付</div> -->

      <van-cell is-link @click="showPopup">确认支付</van-cell>
      <van-popup v-model:show="show">
        <div class="inside2">
          <h5>支付提示</h5>
          <h6>是否支付</h6>
          <div class="choose">
            <div class="left" @click="returns">取消</div>
            <div class="right" @click="buynow">确定</div>
          </div>
        </div>
      </van-popup>
    </footer>
  </div>
</template>


<style lang="scss" scoped>
@import "../assets/css/base.css";

.container {
  .top {
    padding: 0px 15px;
    display: flex;
    align-items: center;

    // background-color: #f5f6fa;
    .back3 {
      width: 6%;
      height: 52px;
      background-image: url(../assets/img/back.eb96d29.png);
      background-repeat: no-repeat;
      background-size: 23px 23px;
      background-position: 0px 15px;
    }

    .title {
      flex: 1;
      height: 52px;
      line-height: 52px;
      text-align: center;
      font-size: 17px;
      font-weight: bolder;
    }

    .change {
      font-size: 17px;
      color: #212530;
      height: 52px;
      line-height: 52px;
    }
  }
}

.money {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 9px;
}

.money h6 {
  height: 48px;
  line-height: 48px;
}

.money h6 span {
  font-size: 25px;
}

.money h5 {
  color: #8a8c91;
  font-weight: 400;
}

h6,
h5,
h4,
h3 {
  margin: 0px;
}

.title > h6 {
  display: flex;
  padding: 0px 15px;
  font-size: 12px;
  color: #8a8c91;
  margin-top: 11px;
  height: 41px;
  line-height: 41px;
  font-weight: normal;
}

.title .choose {
  color: #4e413c;
  display: flex;
  flex-direction: column;
}

.title .choose .first,
.title .choose .second {
  display: flex;
  justify-content: space-between;
  height: 52px;
  line-height: 52px;
  align-items: center;
  padding-left: 50px;
  padding-right: 15px;
  position: relative;
}

.title .choose .first::after {
  display: block;
  content: "";
  width: 25px;
  height: 25px;
  background-image: url(../assets/img/ic_zfb.0f3d445.png);
  background-size: 25px 25px;
  position: absolute;
  left: 15px;
}

.title .choose .second::after {
  display: block;
  content: "";
  width: 25px;
  height: 25px;
  background-image: url(../assets/img/ic_wct.c8c7677.png);
  background-size: 25px 25px;
  position: absolute;
  left: 15px;
}

.title .choose .first h6,
.title .choose .second h6 {
  font-size: 15px;
  font-weight: normal;
  flex: 1;
}

.title .choose .first {
  border-bottom: 1px solid #f3f3f3;
}

.title .choose .first input,
.title .choose .second input {
  width: 20px;
  height: 20px;
}

.container {
  height: 667px;
}

footer {
  position: sticky;
  top: 667px;

  height: 66px;
  box-shadow: 0 -3px 3px 0px #d2d3d4;
  background-color: #ffffff;
  padding: 0px 15px;
  display: flex;
  align-items: center;
}

footer .box {
  height: 40px;
  line-height: 40px;
  flex: 1;
  text-align: center;
  border-radius: 3px;
  background-color: #fc5e3b;
  color: #fff2fa;
}

::v-deep i.van-icon-arrow {
  display: none;
}

::v-deep .van-cell {
  padding: 0px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 3px;
  background-color: #fc5e3b;
}

::v-deep .van-cell__value--alone {
  color: #fff2fa;
  text-align: center;
}

.inside2 {
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 140px;
  border-radius: 3px;
  align-items: center;
  padding-top: 8px;
}

.inside2 h5 {
  font-size: 18px;
  color: #141414;
  height: 40px;
  line-height: 40px;
}

.inside2 h6 {
  color: #bebebe;
  height: 40px;
  line-height: 40px;
  margin-bottom: 14px;
}

.inside2 > .choose {
  display: flex;
  height: 43px;
  border-top: 1px solid #e3e3e3;
  align-items: center;
  width: 100%;
}

.inside2 > .choose .left {
  flex: 1;
  text-align: center;
  height: 43px;
  line-height: 43px;
  border-right: 1px solid #e3e3e3;
}

.inside2 > .choose .right {
  flex: 1;
  height: 43px;
  line-height: 43px;
  text-align: center;
  color: #2da7fb;
}
</style>